<template>
    <div class="app-container">
        <div class="filter-container">
            <el-row>
                <el-col  :lg="6">
                    <el-aside>
                        <el-select v-model="seller_id" placeholder="请选择" label="请选择商家"  style="width:100%;margin: 0;"  @change="changeSelllerRole">
                            <el-option key="" label="请选择商家" value="0"/>
                            <el-option
                                    v-for="item in treeSellerData"
                                    :key="item.id"
                                    :label="item.seller_name"
                                    :value="item.seller_id">
                            </el-option>
                        </el-select>
                        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleRoleEdit(1)"
                                   style="width:100%;margin: 0;">添加角色
                        </el-button>
                        <el-scrollbar class="scrollbar">
                            <el-tree ref="treeList" :data="treeRoleData" :current-node-key="currentNodeKey" default-expand-all node-key="id"
                                     highlight-current @node-click="handleNodeClick" :expand-on-click-node="false" :props="defaultRoleProps"  >
                                <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="tree_mouseenter(data)" >
                                    <span>{{ node.label }}</span>
                                    <span class="el-ic" v-show="ic_show" >
                                        <el-link class="el-icon-circle-plus-outline" type="primary"  v-show="ic_show" title="添加子角色" @click="handleRoleEdit(2,data,node)"></el-link>
                                        <el-link class="el-icon-edit" type="primary"  title="编辑"  v-show="ic_show" @click="handleRoleEdit(3,data,node)"></el-link>
                                        <el-link class="el-icon-delete" type="primary"   v-show="data.is_child" title="删除" @click="handleRoleDelete(data)"></el-link>
                                    </span>
                                </span>
                            </el-tree>
                        </el-scrollbar>
                    </el-aside>
                </el-col>
                <el-col  :lg="18">
                    <div class="filter-container">
                        <el-input
                                v-model="listQuery.search"
                                placeholder="请输入管理员账户/邮箱"
                                style="width: 200px;"
                                class="filter-item"
                                @keyup.enter.native="userHandleFilter"
                        />
                        <el-select v-model="listQuery.status" placeholder="请选择启用状态" clearable class="filter-item">
                            <el-option
                                    v-for="item in calendarCheckOptions"
                                    :key="item.key"
                                    :checked="item.key == listQuery.status"
                                    :label="item.display_name+'('+item.key+')'"
                                    :value="item.key"
                            />
                        </el-select>
                        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="HandleUserFilter">搜索</el-button>
                        <el-button  class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="HandleUserEdit">添加</el-button>
                    </div>
                    <el-table v-loading="listLoading" :data="userList" :element-loading-text="elementLoadingText" border class="margin-buttom-10">
                        <el-table-column show-overflow-tooltip type="selection"/>
                        <el-table-column show-overflow-tooltip prop="seller_admin_id" label="Id" align="center"/>
                        <el-table-column show-overflow-tooltip prop="account" label="管理员" align="center"/>
                        <el-table-column show-overflow-tooltip prop="phone" label="手机号" align="center"/>
                        <el-table-column fixed="right" label="操作" align="center">
                            <template v-slot="{row}">
                                <!-- 编辑与删除 -->
                                <el-button type="text" icon="el-icon-edit" @click="HandleUserEdit(row)">编辑</el-button>
                                <el-button type="text" icon="el-icon-delete" v-if="row.admin_id != 1" @click="handleUserDelete(row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination
                            background
                            :current-page="listQuery.page"
                            :page-size="listQuery.limit"
                            :layout="layout"
                            :total="total"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    />
                </el-col>
            </el-row>

        </div>
        <user-edit ref="userEdit"  />
        <role-edit ref="roleEdit"   />
    </div>
</template>

<script>

    import RoleEdit from './components/role_detail';
    import UserEdit from './components/merchant_detail';
    import waves from '@/directive/waves'; // waves directive

    export default {
        name: "merchantManage",
        components: {UserEdit,RoleEdit},
        directives: {waves},
        data() {
            return {
                ic_show:true,
                seller_id:'',
                roleArray:{
                    seller_id:0,
                    parent_id:0,
                    treeRole:[],
                    treeMenus:[],
                    treeMenusList:[]
                },
                currentNodeKey: '',
                treeSellerData:[],
                treeRoleData:[],
                userList:[],
                calendarCheckOptions:[
                    {key: '-1', display_name: '全部'},
                    {key: '1', display_name: '启用'},
                    {key: '0', display_name: '禁用'}
                ],
                listLoading: true,
                treeLoading: true,
                delDialogVisible: false,
                searchText: '',
                currentNodeKey: null,
                elementLoadingText: '正在加载...',
                layout: 'total, sizes, prev, pager, next, jumper',
                listQuery: {
                    seller_id: 0,
                    seller_role_id: 0,
                    page: 1,
                    limit: 10,
                    search: '',
                    status: '',
                },
                total: 0,
                defaultRoleProps:{
                    children: '_child',
                    value: 'seller_role_id',
                    label: 'role_name',
                }
            }
        },
        watch: {
        },
        created() {
            this.getSellerSelect();
            this.listLoading = false
        },
        methods:{
            tree_mouseenter(data){
                data.ic_show = true;
            },
            tree_mouseleave(data){
                data.ic_show = false;
            },
            addSpatial(data,ar){
                console.log(data)
            },
            // 获取商家列表
            async getSellerSelect() {
                const {data} = await this.$get(this.$api.adminSeller+this.$api.getSelectLists);
                this.treeSellerData = data;
            },
            //获取商家角色
            async changeSelllerRole(){
                console.log('获取商家角色')
                console.log(this.label)
                // this.userList=[]//用户清空
                this.listQuery.seller_id = this.seller_id
                this.roleArray.seller_id=this.seller_id
                console.log(this.seller_id)
                console.log(this.roleArray)
                //角色数据
                const {data} = await this.$get(this.$api.adminSellerRole+this.$api.getSelectLists,{seller_id:this.seller_id});
                this.treeRoleData = data;
                this.roleArray.treeRole = data;
                this.getUserList(); //获取用户
            },
            //点击角色获取用户
            handleNodeClick(data) {
                console.log('点击角色获取用户')
                console.log(data)
                this.roleArray.seller_id = this.seller_id
                this.roleArray.seller_role_id = data.seller_role_id
                this.listQuery.seller_id = this.seller_id
                this.listQuery.seller_role_id = data.seller_role_id
                console.log(this.roleArray)
                this.getUserList(); //获取用户
            },
            //获取用户列表
            async getUserList(callback){
                const  {data, status, msg} = await this.$get(this.$api.adminSellerUser,this.listQuery);
                if(this.listQuery.is_download == 1){
                    if (callback){
                        callback(data, status, msg);
                    }
                }else{
                    this.userList = data.data;
                    this.total = data.total;
                    this.listQuery.limit = data.per_page || 10;
                }
                setTimeout(() => {
                    this.listLoading = false;
                }, 300);

            },
            //添加和编辑角色 node 当前上级
            handleRoleEdit(i,row,node) {
                if (this.seller_id==0){
                    this.$message({
                        message: '请选择商家',
                        type: 'error'
                    });
                }else {
                    console.log('添加子角色---------编辑角色')
                    console.log("1-》row 数据-"+row)
                    console.log(row)
                    if (i==1){
                        this.roleArray.parent_id = 0

                        console.log('2-》roleArray-'+this.roleArray)
                        console.log(this.roleArray)
                        this.$refs['roleEdit'].showRoleEdit(this.roleArray,{}, 1);
                    } else {
                        this.roleArray.treeMenusList = node.parent.data.tree_menu
                        if (i==2){
                            console.log('添加子角色')
                            this.roleArray.parent_id = row.parent_id
                        } else if (i==3){
                            if ( row.parent_id ==0){
                                console.log('编辑总')
                            } else {
                                console.log('编辑角色')
                                this.roleArray.parent_id = row.seller_role_id
                            }
                        }

                        console.log('3-》roleArray-'+this.roleArray)
                        console.log(this.roleArray)
                        this.$refs['roleEdit'].showRoleEdit(this.roleArray,row,  i);
                    }
                }
            },
            //添加用户
            HandleUserEdit(row){
                if (this.seller_id==0){
                    this.$message({
                        message: '请选择商家，进行添加商家用户',
                        type: 'error'
                    });
                } else if (this.seller_role_id==0){
                    this.$message({
                        message: '请选择角色',
                        type: 'error'
                    });
                }else {
                    console.log('this.roleArray')
                    console.log(this.roleArray)
                    if (row) {
                        this.$refs['userEdit'].userShowEdit(this.roleArray,row,);
                    } else {
                        this.$refs['userEdit'].userShowEdit(this.roleArray,{});
                    }
                }
            },
            // 删除权限
            handleRoleDelete(row){
                console.log('handleRoleDelete')
                console.log(row)
            },
            // 删除
            handleUserDelete(row){
                console.log('handleUserDelete')
                console.log(row)
            },
            handleSizeChange(val) {
                this.listQuery.limit = val;
                this.listQuery.is_download = 0;
                this.getUserList();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.getUserList();
            },
            handleFilter() {
                this.listQuery.page = 1;
                this.getUserList();
            },
            //搜索用户
            HandleUserFilter() {
                if (this.seller_id==0){
                    this.$message({
                        message: '请选择商家',
                        type: 'error'
                    });
                }
                this.listQuery.page = 1;
                this.getUserList();
            },
        },
        method: {

        }
    }
</script>

<style lang="scss" scoped>
    /*分类树增加边框样式*/
    .el-aside {
        background: #ffffff;
        padding: 0 !important;
        margin: 0!important;;
        border: 1px solid #e7e8eb;
        width: 400px !important;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
    .warpper .el-tree--highlight-current   .el-tree-node.is-checked > .el-tree-node__content {
           background-color: #1890ff;
          color:rgb(64, 158, 255);
       }
     .warpper .el-tree--highlight-current   .el-tree-node.is-current > .el-tree-node__content {
             background-color:#1890ff;;
             color:rgb(64, 158, 255);
              }
    /*分类树增加滚动样式*/
    .scrollbar {
        /*height: calc(100% - 80px);*/
        height: 600px;
    }

    .scrollbar .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    /*分类树编辑删除按钮样式*/
    div .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

</style>